<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用户管理 - Mubea</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="../source/css/base.css" rel="stylesheet" type="text/css" />
<link href="../source/css/element-ui@2.4.0.index.css" rel="stylesheet" type="text/css" />
<link href="../source/css/main.css" rel="stylesheet" type="text/css" />

</head>
    <div id="app" class="main userlist">
        <div class="header cf">
            <div class="header-wrap">
                <a href="./main.html?type=1">
                    <img class="logo" src="../source/img/logo.png" alt="" />
                </a>

                <el-dropdown class="fr" v-if="username" v-cloak @command="handleCommand">
                    <span class="el-dropdown-link">
                    {{username}} <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">修改密码</el-dropdown-item>
                        <el-dropdown-item command="2">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>


        <div class="bd">
            <!--左侧菜单栏-->
            <div class="nav-box">
                <div class="nav-menu" v-cloak>
                    <el-menu
                            default-active="1-8"
                            class="el-menu-vertical-demo"
                            @open="openMenu"
                            @close="closeMenu"
                            @select="changeMenu"
                            theme="dark">

                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-setting"></i><span>功能菜单</span>
                            </template>
                            <el-menu-item :index="'1-'+(index+1)" v-for="(menu,index) in menuData" :key="index">
                                {{menu}}
                            </el-menu-item>
                        </el-submenu>

                    </el-menu>
                </div>
            </div>

            <!--右侧内容-->
            <div class="cont-box">
                <div class="cont-wrap">
                    <div class="cont-hd" v-cloak>
                        <el-form ref="searchForm" class="search-form" :inline="true" label-position="left" :model="searchForm" label-width="auto">
                            <el-form-item label="用户名" >
                                <el-input v-model="searchForm.name"  placeholder="公司名称"></el-input>
                            </el-form-item>

                            <el-form-item label="供应商代码" style="margin-left:20px;">
                                <el-input v-model="searchForm.number"  placeholder="供应商代码"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="onSearch" style="margin-top:-4px;margin-left:20px;">查询</el-button>
                                <el-button type="success" icon="el-icon-plus" @click="showAddRowPop" style="margin-top:-4px;margin-left:30px;">新增</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="cont-bd" v-loading="loading" element-loading-text="加载中..." v-cloak>
                        <el-table
                                :data="tableData"
                                border
                                style="width: 100%">
                            <!--<el-table-column
                                    fixed
                                    type="selection"
                                    width="55">
                            </el-table-column>-->
                            <el-table-column
                                    fixed
                                    prop="company"
                                    label="公司名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="公司地址"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="公司电话"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="file"
                                    label="营业执照"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="contractName"
                                    label="联系人姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="contractEmail"
                                    label="联系人邮箱"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="contractPhone"
                                    label="联系人电话"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="venderno"
                                    label="供应商代码"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="username"
                                    label="网站用户名"
                                    width="180">
                            </el-table-column>
                            <!--<el-table-column
                                    prop="pwd"
                                    label="密码"
                                    width="180">
                            </el-table-column>-->
                            <el-table-column
                                    fixed="right"
                                    prop="isDisabled"
                                    label="操作"
                                    width="100">
                                <template slot-scope="scope">
                                    <a href="javascript:;" @click="apiDisableRow(scope.row,scope.$index)">{{scope.row.isAble === 1 ? '禁用' : '启用'}}</a>
                                    <a class="update-btn" href="javascript:;" @click="showUpdateRowPop(scope.row,scope.$index)">修改</a>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pages tr" v-if="pageTotal > pageInfo.pagecount">
                            <el-pagination
                                background
                                @current-change="currentChange"
                                layout="prev, pager, next, jumper, ->"
                                :current-page="pageindex"
                                :page-size="pageInfo.pagecount"
                                :total="pageTotal">
                            </el-pagination>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- 普通页面的新增和修改的内容-->
        <el-dialog
            :title="dialog.title"
            :visible.sync="dialog.visible"
            :close-on-click-modal="false"
            class="userlist-dialog"
            width="40%"
            :before-close="closeDialog">

            <el-form ref="dialogForm1" :model="formData1" :rules="formrules1" label-width="100px">
                <el-form-item label="公司名称" prop="company">
                    <el-input v-model="formData1.company" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="公司地址" prop="address">
                    <el-input v-model="formData1.address" placeholder="请输入公司地址"></el-input>
                </el-form-item>
                <el-form-item label="公司电话" prop="phone">
                    <el-input v-model="formData1.phone" placeholder="请输入公司电话"></el-input>
                </el-form-item>
                <el-form-item label="营业执照" prop="file">
                    <div class="file-pic" v-show="isShowPic">
                        <img :src="formData1.file" alt="" />
                        <!--<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1561875544,2059314968&fm=58&bpow=1024&bpoh=768" alt="" />-->

                        <span class="delete">
                            <i class="el-icon-delete" title="删除" @click="deletePic()"></i>
                        </span>
                    </div>

                    <a href="javascript:;" id="filePicker" class="file-picker" v-show="!isShowPic" >

                        <i class="el-icon-plus"></i>
                    </a>
                </el-form-item>
                <el-form-item label="角色类型" prop="userType">
                    <el-select v-model="formData1.userType" placeholder="请选择角色类型" @change="changeUserType">
                        <el-option
                                v-for="item in typeArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="contractName">
                    <el-input v-model="formData1.contractName" placeholder="请输入联系人姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系人邮箱" prop="contractEmail">
                    <el-input v-model="formData1.contractEmail" placeholder="请输入联系人邮箱"></el-input>
                </el-form-item>

                <el-form-item label="联系人电话" prop="contractPhone">
                    <el-input v-model="formData1.contractPhone" placeholder="请输入联系人电话"></el-input>
                </el-form-item>

                <el-form-item label="供应商代码" prop="venderno">
                    <el-input v-model="formData1.venderno" placeholder="请输入供应商代码"></el-input>
                </el-form-item>

                <el-form-item label="网站用户名" prop="username">
                    <input type="username" style="position: absolute;left: 99999px" />
                    <el-input v-if="dialog.type == 1" v-model="formData1.username" placeholder="请输入网站用户名" autocomplete="off"></el-input>

                    <el-input v-if="dialog.type == 2" v-model="formData1.username" placeholder="请输入网站用户名" autocomplete="off" readonly="true" disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pwd">
                    <input type="password" style="position: absolute;left: 99999px" />
                    <el-input type="password" v-model="formData1.pwd" placeholder="请输入密码" autocomplete="off" ></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>



<script src="../source/js/lib/vue.min.js"></script>
<script src="../source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="../source/js/lib/jquery.min.js"></script>
<script src="../source/js/common.js?0717"></script>
<script src="../source/js/lib/webuploader/webuploader.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            menuData:['Plant','MRP Controller','Purchasing Group','Order Unit','Material','Vendor','Base Unit of Measure','用户管理'],
            defaultActive:-1,
            loading:false,
            dialog:{
                visible:false,
                type:'',  //1新增  2修改
                title:'',
            },
            searchForm:{
                "number":"",
                "name":"",
                "type":8,
                "pageindex":1,
                "pagecount":pageInfo.pagecount,

                "company":"",				       /*公司名称*/
                "address":"",				       /*公司地址*/
                "phone":"",				           /*公司电话*/
                "file":"",				           /*营业执照*/
                "contractName":"",		       /*联系人姓名*/
                "contractPhone":"",				/*联系人电话*/
                "contractEmail":"",				/*联系人邮箱*/
                "venderno":'',   //供应商代码
                "username":decodeURIComponent(getCookie('username')),

                "pwd":"",
                "account":user.account,
            },
            formData1:{
                "number":"",
                "name":"",
                "type":8,
                "pageindex":1,
                "pagecount":pageInfo.pagecount,

                "company":"",				       /*公司名称*/
                "address":"",				       /*公司地址*/
                "phone":"",				           /*公司电话*/
                "file":"",				           /*营业执照*/
                "userType":"",		       /*角色类型*/
                "contractName":"",		       /*联系人姓名*/
                "contractPhone":"",				/*联系人电话*/
                "contractEmail":"",				/*联系人邮箱*/
                "venderno":'',   //供应商代码
                "username":decodeURIComponent(getCookie('username')),

                "pwd":"",
                "account":user.account,
            },
            addFormDataTPL:{
                "number":"",
                "name":"",
                "type":8,
                "pageindex":1,
                "pagecount":pageInfo.pagecount,

                "company":"",				       /*公司名称*/
                "address":"",				       /*公司地址*/
                "phone":"",				           /*公司电话*/
                "file":"",				           /*营业执照*/
                "userType":"",		       /*角色类型*/
                "contractName":"",		       /*联系人姓名*/
                "contractPhone":"",				/*联系人电话*/
                "contractEmail":"",				/*联系人邮箱*/
                "venderno":'',   //供应商代码
                "username":"",

                "pwd":"",
                "account":user.account,
            },
            typeArr: [ //0 : 计划员  1：供应商 2：管理员
                {
                    value: '0',
                    label: '计划员'
                },
                {
                    value: '1',
                    label: '供应商'
                }
            ],
            isShowPic:false,
            formrules1: {
                company: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入公司地址', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入公司电话', trigger: 'blur' },
                ],
                file: [
                    // { required: true, message: '请上传营业执照', trigger: 'blur' },
                ],
                userType: [
                    { required: true, message: '请选择角色类型', trigger: 'blur' },
                ],
                contractName: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                ],
                contractPhone: [
                    { required: true, message: '请输入联系人电话', trigger: 'blur' },
                ],
                contractEmail: [
                    { required: true,validator:function(rule, value, callback){
                            if(value.trim() === ""){
                                callback(new Error('请输入联系人邮箱'));
                            }else if (!ARegexp.email.test(value)){
                                callback(new Error('邮箱格式错误'));
                            } else {
                                callback();
                            }
                        }},
                ],
                venderno:[
                    { required: false, message: '请输入供应商代码', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            },
            tableData: [],
            selectionRows:[], //选中的行
            pageindex:1,
            pagecount:pageInfo.pagecount,
            pageTotal:1,
            updateIndex:-1, //修改行的索引
            username:decodeURIComponent(getCookie('username'))
        },
        methods: {
            openMenu:function(key, keyPath) {
                console.log(key, keyPath);
            },
            closeMenu:function(key, keyPath) {
                console.log(key, keyPath);
            },
            changeMenu:function(index,path){
                this.defaultActive = index;
                var type = index.split('-')[1];
                var _this = this;
                if(type != 8){
                    location.href = './main.html?type='+type;
                }
            },
            apiGetRows:function(type){
                var _this = this;
                var data = {};
                if(type == 'search') {
                    data = _this.searchForm;
                }else{
                    data = _this.formData1;
                }
                this.loading = true;
                data.time = new Date().getTime();
                $.ajax({
                    url:apiUrl+'/ItemQuery',
                    type:'GET',
                    data:{'json':JSON.stringify(data)},
                    //dataType :'jsonp',
                    success:function(datas){
                        console.log('datas',datas)
                        if(datas.Success===true){
                            _this.tableData = datas.ItemList;
                            _this.pageTotal = datas.Count;
                        }else{
                            _this.$message.error(datas.Msg);
                        }
                    },
                    error:function(datas){
                        _this.$message.error(datas.Msg);
                    },
                    complete:function(){
                        _this.loading = false;
                    }
                });
            },
            apiAddRow:function(){
                var _this = this;
                _this.formData1.time = new Date().getTime();
                _this.$nextTick(function(){
                    $.ajax({
                        url:apiUrl+'/ItemNew',
                        type:'POST',
                        data:{'json':JSON.stringify(_this.formData1)},
                        //dataType :'jsonp',
                        success:function(datas){
                            console.log('datas',datas)
                            if(datas.Success===true){
                                _this.$message.success('恭喜，新增成功');

                                _this.formData1.pageindex = 1;
                                _this.$nextTick(function(){
                                    _this.closeDialog();
                                    _this.apiGetRows();
                                })
                            }else{
                                _this.$message.error(datas.Msg);
                            }
                        },
                        error:function(datas){
                            _this.$message.error(datas.Msg);
                        }
                    });
                })
            },
            apiUpdateRow:function(index){
                var _this = this;
                _this.formData1.time = new Date().getTime();
                _this.$nextTick(function() {
                    $.ajax({
                        url: apiUrl + '/ItemUpdate',
                        type: 'POST',
                        data: {'json': JSON.stringify(_this.formData1)},
                        //dataType :'jsonp',
                        success: function (datas) {
                            if (datas.Success === true) {
                                _this.$message.success('恭喜！修改成功');
                                _this.tableData[_this.updateIndex].company = _this.formData1.company;
                                _this.tableData[_this.updateIndex].address = _this.formData1.address;
                                _this.tableData[_this.updateIndex].phone = _this.formData1.phone;
                                _this.tableData[_this.updateIndex].file = _this.formData1.file;
                                _this.tableData[_this.updateIndex].userType = _this.formData1.userType;
                                _this.tableData[_this.updateIndex].contractName = _this.formData1.contractName;
                                _this.tableData[_this.updateIndex].contractEmail = _this.formData1.contractEmail;
                                _this.tableData[_this.updateIndex].contractPhone = _this.formData1.contractPhone;
                                _this.tableData[_this.updateIndex].venderno = _this.formData1.venderno;
                                _this.tableData[_this.updateIndex].username = _this.formData1.username;
                                _this.tableData[_this.updateIndex].pwd = _this.formData1.pwd;

                                _this.closeDialog();


                            } else {
                                _this.$message.error(datas.Msg);
                            }
                        },
                        error: function (datas) {
                            _this.$message.error(datas.Msg);
                        }
                    });
                })
            },
            apiDisableRow:function(rowData,index){
                var url = apiUrl;
                var _this = this;

                if(rowData.isAble){ // 去禁用
                    url = apiUrl+'/ItemDisable';
                }else{ //去开启
                    url = apiUrl+'/Itemable'
                }
                _this.formData1.number = rowData.Number;
                _this.formData1.name = rowData.Name;
				_this.formData1.time = new Date().getTime();

                this.$nextTick(function(){
                    $.ajax({
                        url:url,
                        type:'GET',
                        data:{'json':JSON.stringify(_this.formData1)},
						cache:false,
						// beforeSend :function(xmlHttp){
						// 	xmlHttp.setRequestHeader("If-Modified-Since","0");
						// 	xmlHttp.setRequestHeader("Cache-Control","no-cache");
						// },
                        //dataType :'jsonp',
                        success:function(datas){
                            console.log('datas',datas)
                            if(datas.Success===true){
                                if(rowData.isAble === 1){ // 禁用成功
                                    _this.$message.success('禁用成功');
                                    _this.tableData[index].isAble = 0;
                                }else{
                                    _this.$message.success('开启成功');
                                    _this.tableData[index].isAble = 1;
                                }

                            }else{
                                _this.$message.error(datas.Msg);
                            }
                        },
                        error:function(datas){
                            _this.$message.error(datas.Msg);
                        },
                        complete:function(){
                            _this.formData1.number = "";
                            _this.formData1.name = "";
                        }
                    });
                })
            },
            onSearch:function(){
                this.apiGetRows('search')
            },
            deletePic:function(){ // 删除图片
                this.formData1.file = '';
                this.isShowPic = false;

                // this.uploader.reset();
                this.initUploader();
            },
            showAddRowPop:function(){
                this.dialog.visible =true;
                this.dialog.type = 1 ;
                this.dialog.title = '新增';

                this.formData1 = JSON.parse(JSON.stringify(this.addFormDataTPL))
                this.$nextTick(function(){
                    // resetField()
                    console.log(11)
                    this.$refs['dialogForm1'].resetFields();
                    this.initUploader();
                })
            },
            showUpdateRowPop:function(rowData,index){
                this.dialog.visible =true;
                this.dialog.type = 2 ;
                this.dialog.title = '修改';
                // 表示修改的哪一行
                this.updateIndex = index;

                // 赋值参数
                this.formData1.company = rowData.company /*公司名称*/
                this.formData1.address =rowData.address	 /*公司地址*/
                this.formData1.phone =rowData.phone /*公司电话*/
                this.formData1.file =rowData.file /*营业执照*/
                this.formData1.userType =rowData.userType /*角色类型*/
                this.formData1.contractName =rowData.contractName /*联系人姓名*/
                this.formData1.contractPhone =	rowData.contractPhone /*联系人电话*/
                this.formData1.contractEmail =rowData.contractEmail /*联系人邮箱*/
                this.formData1.venderno =rowData.venderno /*供应商代码*/
                this.formData1.username = rowData.username  /*用户名*/
                this.formData1.pwd = "***"

                // 开启供应商代码验证
                if(this.formData1.userType == 0){
                    this.formrules1.venderno[0].required = false;
                }else{
                    this.formrules1.venderno[0].required = true;
                }

            },
            closeDialog:function(){ //关闭弹窗
                this.dialog = {
                    visible:false,
                    type:'',  //1新增  2修改
                    title:'',
                }

                this.$refs['dialogForm1'].resetFields();
            },
            currentChange:function(cur){
                var _this = this;
                this.formData1.pageindex = cur;
                this.$nextTick(function(){
                    _this.apiGetRows();
                })
            },
            initUploader:function(){
                var _this = this;

                this.uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    server: apiUrl2+'/UploadOrder',
                    method:'POST',
                    auto: false,
                    swf:'../source/js/lib/webuploader/Uploader.swf',
                    pick: {
                        id:'#filePicker',
                        multiple:false
                    },
                    // prepareNextFile:true,
                    formData:{'json':JSON.stringify(_this.uploadData)},
                    // fileNumLimit:1,
                    threads:1,
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });

                this.uploader.on( 'fileQueued', function( file ) {

                    console.log('file',file)
                    if(!/(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i.test(file.name)){
                        _this.$message.error('请上传jpg/jpeg/png/gif/bmp格式的照片！');
                        return false;
                    }

                    if(file.size / 1024 / 1024 > 5){
                        _this.$message.error('上传文件大小不能超过 5MB!');
                        return false;
                    }


                    _this.uploader.makeThumb( file, function( error, ret ) {
                        _this.formData1.file = ret;
                        _this.isShowPic = true;
                        // _this.formData1.file = obj.value;

                        /*_this.$nextTick(function(){
                            uploader.reset();
                        })*/
                    },1,1);

                    return false;
                });
            },
            submitForm:function(){ // 新增 和 修改
                var _this = this;
                this.$refs['dialogForm1'].validate(function(valid){
                    console.log('valid',valid)
                    if (valid) {
                        (_this.dialog.type == 1) &&  _this.apiAddRow();
                        (_this.dialog.type == 2) &&  _this.apiUpdateRow();
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },
            changeUserType:function(val){
                if(val == 0){
                    this.formrules1.venderno[0].required = false;
                }else{
                    this.formrules1.venderno[0].required = true;
                }
            },
            isLogin:function(){
                var username = getCookie('username');
                if(username && username != 'undefined'){
                    return true;
                }
                return false;
            },
            loginout:function(){
                removeCookie('username');
                removeCookie('type');
                location.href='./login.html';
            },
            handleCommand:function(command){
                if(command == 1){
                    location.href='./update_pwd.html';
                }else if(command == 2){
                    this.loginout()
                }
            }

        },
        created:function(){
            this.apiGetRows();

            if(!this.isLogin()){ //登录
                location.href = './login.html';
            }
        },
    })
</script>
</body>
</html>